<template>
  <div class="add-row-license">
    <!-- {{rowData}} -->
    <el-row :gutter="20" v-for="(row, index) in rowData" :key="index" class="row-item">
      <el-col :span="7">
        <!--<label v-if="(index+1) == 1">预售许可证</label>-->
        <el-input
          class="row-ipt"
          placeholder="请输入预售许可证"
          v-model="row.card">
        </el-input>
      </el-col>
      <el-col :span="7">
        <label>发证时间:</label>
        <el-date-picker
          v-model="row.inputtime"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="7">
        <label>绑定楼栋:</label>
        <el-input
          class="row-ipt"
          placeholder="请输入预售许可证"
          v-model="row.floor">
        </el-input>
      </el-col>
      <el-col :span="3">
        <i v-if="(index+1) == 1" class="add-icon el-icon-circle-plus" @click="addRow(row)"></i>
        <i v-else class="add-icon el-icon-remove" @click="deleteRow(row)"></i>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
      name: 'AddRowLicense',
      props: {
          propData: {
              type: Array,
              required: false,
              default:function(){
                  return [{
                  id: 0,
                  card: '',
                  inputtime: '',
                  floor: ''
              }]
              }
          }
      },
      data () {
          return {
              rowData: [
                  {
                      id: 0,
                      card: '',
                      inputtime: '',
                      floor: ''
                  }
              ]
          }
      },
      watch: {
          'rowData': {
              deep: true,
              handler(val){
                  this.$emit('dataLicenseChange', val)
              }
          }
      },
      methods: {
          addRow (row) {
              //row.id+1
              //给rowData排个序
              for(let idx in this.rowData){
                  this.rowData[idx].id == idx
              }
              let obj = {
                  id: this.rowData.length,
                  card: '',
                  inputtime: '',
                  floor: ''
              }
              this.rowData.push(obj)
          },
          deleteRow (row) {
//              alert(JSON.stringify(this.rowData))
              for(let idx in this.rowData){
                if(this.rowData[idx].id == row.id){
                    this.$delete(this.rowData, idx)
                    break;
                }
              }
//              this.$delete(this.rowData, row.id - 1)
          }
      },
      created() {
          if (this.propData.length > 0) {
              for(let idx in this.propData){
                  this.propData[idx]['id'] = parseInt(idx)
              }
              this.rowData = this.propData;
          }
      }
  }
</script>

<style lang="scss" scoped>
.add-row-license {
  color: #5a5e66;
  font-size: 14px;
  .row-item {
    margin-bottom: 20px;
  }
  .el-col-7 {
    width: inherit;
  }
  .el-col {
    .row-ipt {
      width: inherit;
      width: 100px;
      font-size: 12px;
      margin-right: 5px;
    }
    .add-icon {
      color: #2da3fb;
      font-size: 30px;
    }
  }
  .el-col:first-child:before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
  }
}
</style>
